<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { crmSeat_getCount } from "@/api/index";
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";

const companyInfo = ref({
  balance: 0,
  cost_today: 0,
  seat_limit: 0,
  seat_use: 0,
  company_name: ""
});

onMounted(() => {
  crmSeat_getCount().then(res => {
    companyInfo.value = res.data;
  });
});
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="24"
    :xs="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 640
      }
    }"
  >
    <el-card shadow="never">
      <div class="flex justify-between">
        <b class="text-md font-medium">{{companyInfo.company_name || '-'}}</b>
      </div>
      <div class="merchantInfo mt-[15px]">
        <div class="infoInner mb-[20px]">
          <div class="infoList flex">
            <div class="item">
              <p>业务员席位总数</p>
              <b>{{companyInfo.seat_limit}}</b>
            </div>
            <div class="item">
              <p>已使用业务员席位数</p>
              <b>{{companyInfo.seat_use}}</b>
            </div>
          </div>
          <div class="tip">
            <p>席位若不够，请联系好数团队</p>
            <div class="handle flex items-center">
              去联系
              <el-icon class="ml-[8px]" size="16"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
        <div class="infoInner">
          <div class="infoList flex">
            <div class="item">
              <p>今日话费消费(元)</p>
              <b>{{companyInfo.cost_today}}</b>
            </div>
            <div class="item">
              <p>话费余额(元)</p>
              <b style="color: #eabe20">{{companyInfo.balance}}</b>
            </div>
          </div>
          <div class="tip">
            <p>话费余额不足，将影响外呼拨打</p>
            <div class="handle flex items-center">
              去充值
              <el-icon class="ml-[8px]" size="16"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
.merchantInfo {
  .infoInner {
    .infoList {
      .item {
        flex: 1;
        p {
          font-size: 13px;
          // font-weight: bold;
          color: #919191;
        }

        b {
          margin-top: 5px;
          display: block;
          font-size: 18px;
        }
      }
    }

    .tip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #f0f0f0;
      padding: 10px 12px;
      margin-top: 6px;
      border-radius: 5px;

      p {
        font-size: 13px;
        color: #999999;
        // font-weight: bold;
      }

      .handle {
        font-size: 14px;
        color: var(--pure-theme-menu-active-before);
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>
